import { FC, useState } from 'react';
import { Card, Space, Button } from 'antd';
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
const index: FC = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const onEditorStateChange = (editorState: any) => {
    setEditorState(editorState)
  }
  return (
    <Space direction="vertical" style={{ width: "100%" }}>
      <Card title="富文本编辑器">
        <Space>
          <Button type="primary" ghost onClick={() => {
            console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())))
          }}>导出</Button>
          <Button danger onClick={() => {
            setEditorState(EditorState.createEmpty());
          }}>清除内容</Button>
        </Space>
        <Editor
          editorState={editorState}
          toolbarClassName="toolbarClassName"
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          onEditorStateChange={onEditorStateChange}
        />
        {/* <textarea
          disabled
          value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        /> */}

      </Card>
    </Space>
  );
}

export default index;